@config.main("Enrichment") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Enrichment")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">

                        @components.radio("Method", "method", "kegg", Seq(("kegg", "KEGG"), ("go" -> "GO")), labelBox = "3")

                        @components.radio2("Species", "species", "XJDY", Seq(("XJDY", Html("<i>M. sativa </i>cultivar XinJiangDaYe")),
                            ("ZMNO" -> Html("<i>M. sativa  </i>cultivar Zhongmu No. 1")), ("MSAE", Html("<i>M. sativa spp. caerulea </i>")),
                            ("MTRU" -> Html("<i>M. truncatula </i>")),("ZM-4" -> Html("<i>M. sativa </i>cultivar Zhongmu No. 4"))), labelBox = "3", style = "text-align: left;")

                        @components.textarea("Enter gene id", "id", "id", "getExample()")

                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>
                    </div>
                </form>

                <div id="result" style="display: none;">
                    <hr>
                    <h5 class="result-title">Result:</h5>

                    <ul class="nav nav-tabs px-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="rTable-tab" data-toggle="tab" href="#ul-rTable" role="tab"
                            aria-controls="ul-rTable" aria-selected="true"> </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="img-tab" data-toggle="tab" href="#ul-img" role="tab"
                            aria-controls="ul-img" aria-selected="true"></a>
                        </li>
                    </ul>

                    <div class="tab-content py-0 px-0">
                        <div class="tab-pane fade show active" id="ul-rTable" role="tabpanel"
                        aria-labelledby="rTable-tab" style="width: 100%">
                            <table class="table table-bordered table-all" id="table"
                            data-page-list="[10, 25, 50, 100, all]" data-pagination="true"
                            data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all">
                            </table>
                        </div>

                        <div class="tab-pane fade" id="ul-img" role="tabpanel"
                        aria-labelledby="img-tab">
                            <div>
                                <button class="btn my-btn" style="width: 200px;
                                height: 40px;
                                    margin-bottom: 10px" id="download1"
                                >
                                    <i class="fa fa-download"></i> Download Image1
                                </button>

                                <button class="btn my-btn" style="width: 200px;
                                    height: 40px;margin-left: 20px;
                                    margin-bottom: 10px" id="download2"
                                >
                                    <i class="fa fa-download"></i> Download Image2
                                </button>
                            </div>

                            <div style="display: flex">
                                <img id="img1" style="width: 50%"/>
                                <img id="img2" style="width: 50%"/>
                            </div>

                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>

    <script>

            $(function () {
                formValidation()
            })

            const goColumns = [
                {
                    field: "0",
                    title: "ID",
                    sortable: "true",
                    searchType: "text",
                    formatter: function (value, rows) {
                        return `<a href="http://amigo.geneontology.org/amigo/term/${value}" target="_blank">${value}</a>`
                    }
                }, {
                    field: "1",
                    title: "Description",
                    sortable: "true",
                    searchType: "text"
                }, {
                    field: "2",
                    title: "Namespace",
                    sortable: "true",
                    searchType: "num"

                }, {
                    field: "3",
                    title: "Ratio In Study",
                    sortable: "true",
                    searchType: "num"
                }, {
                    field: "4",
                    title: "Ratio In Pop",
                    sortable: "true",
                    searchType: "text",
                },
                {
                    field: "5",
                    title: "P Value",
                    sortable: "true",
                    searchType: "text",
                },
                {
                    field: "6",
                    title: "Fdr",
                    sortable: "true",
                    searchType: "text",
                },
                {
                    field: "7",
                    title: "Input",
                    sortable: "true",
                    searchType: "text",
                    formatter: function (value) {
                        let genes = []
                        value.split("|").forEach(v => {
                            genes.push(`<a href="/alfalfa/browse/geneByGeneId/${v}" target="_blank">${v}</a>`)
                        })
                        return genes
                    }
                }
            ]

            const keggColumns = [
                {
                    field: "0",
                    title: "Layer1",
                    sortable: "true",
                    searchType: "text"
                }, {
                    field: "1",
                    title: "Layer2",
                    sortable: "true",
                    searchType: "text"
                }, {
                    field: "2",
                    title: "Layer3",
                    sortable: "true",
                    searchType: "text"

                }, {
                    field: "3",
                    title: "ID",
                    sortable: "true",
                    searchType: "text",
                    formatter: function (value, row) {
                        return `<a href="${row["9"]}" target="_blank">${value}</a>`
                    }
                }, {
                    field: "4",
                    title: "Input number",
                    sortable: "true",
                    searchType: "text",
                },
                {
                    field: "5",
                    title: "Background number",
                    sortable: "true",
                    searchType: "text",
                },
                {
                    field: "6",
                    title: "P-Value",
                    sortable: "true",
                    searchType: "text",
                },
                {
                    field: "7",
                    title: "FDR",
                    sortable: "true",
                    searchType: "text"
                },
                {
                    field: "8",
                    title: "Input",
                    sortable: "true",
                    searchType: "text",
                    formatter: function (value) {
                        let genes = []
                        value.split("|").forEach(v => {
                            genes.push(`<a href="/alfalfa/browse/geneByGeneId/${v}" target="_blank">${v}</a>`)
                        })
                        return genes
                    }
                }
            ]

            function Search() {
                let form = $("#form");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();

                    $.ajax({
                        url: "@routes.ToolsController.toolsRun("enrich")",
                        type: "post",
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        data: new FormData($("#form")[0]),
                        success: function (data) {
                            if (data.valid === "false") {
                                swal("Error", data.msg, "error");
                            } else {
                                let method = $("input[name=method]:checked").val()
                                $("#rTable-tab").text(method.toUpperCase() + " Table")
                                $("#img-tab").text(method.toUpperCase() + " Enrich Image")
                                let columns = keggColumns
                                $("#download1").attr("onclick", "DownloadPdf('" + data.f + "','Ko.enrich.pdf')")
                                $("#download2").attr("onclick", "DownloadPdf('" + data.f + "','ko_dodge.pdf')")
                                if (method === "go") {
                                    columns = goColumns
                                    $("#download1").attr("onclick", "DownloadPdf('" + data.f + "','go.Go.enrich.pdf')")
                                    $("#download2").attr("onclick", "DownloadPdf('" + data.f + "','go_stack.pdf')")
                                }

                                let $table = $(`#table`)
                                $table.bootstrapTable("destroy")
                                $table.bootstrapTable({
                                    data: data.table,
                                    columns: columns
                                })
                                $("#img1").attr("src", "data:image/png;base64," + data.img1)
                                $("#img2").attr("src", "data:image/png;base64," + data.img2)

                                const $result = $("#result");
                                $result.show()
                                let target_top = $result.offset().top - 80;
                                $("html,body").animate({scrollTop: target_top}, 800);
                            }
                            layer.close(index)
                        }
                    });
                }
            }

            function getExample() {
                let db = $("input[name=species]:checked").val()
                $.post("/alfalfa/tools/getGeneNameExample/" + db, (data) => {
                    $("#id").val(data)
                })
            }

            function DownloadPdf(path, file) {
                window.location.href = "/alfalfa/download/downloadTmp?path=" + path + "&file=" + file;
            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        id: {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                }
                            }
                        },
                        pval: {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                },
                                numeric: {
                                    message: 'The p-value must be a number!'
                                }
                            }
                        }
                    }
                });
            }



    </script>
}